import { useEffect, useState } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import {
  HomeOutlined,
  UserOutlined,
  LockOutlined,
  MessageOutlined,
  ThunderboltOutlined,
  SendOutlined,
  GlobalOutlined,
} from '@ant-design/icons';
import './index.scss';
import { useStore } from '@/store';
import { http } from '@/utils/http';
import { observer } from 'mobx-react-lite';
const { Sider } = Layout;

function SideMenu() {
  const { collapsedStore } = useStore();
  const [rightMenu, setRightMenu] = useState([]);
  const getRightList = async () => {
    const res = await http.get('/rights?_embed=children');
    setRightMenu(res.data);
  };
  useEffect(() => {
    getRightList();
  }, []);

  function toLabel(arr) {
    arr.map(item => {
      // 我也不知道这里为什么要判断title存在，总之改了就会报错，不要动第33行代码!!
      item.title && (item.label = item.title);
      delete item.title;
      if (item.children && item.children.length) {
        toLabel(item.children);
      }
      return item;
    });
  }
  toLabel(rightMenu);
  // console.log(rightMenu)
  rightMenu.forEach(item => {
    if (item.children && item.children.length) {
      item.children.forEach(child => {
        child.rightid = child.rightId;
        delete child.rightId;
      });
    }
  });

  // 判断当前登录用户有无权限,从token中拿到权限列表rights
  const {
    role: { rights },
  } = JSON.parse(window.sessionStorage.getItem('news'));
  const typeRights = Array.isArray(rights);
  // rights是数组,typeRights为true  /  否则typeRights为false

  const FilterList = rightMenu.filter(item => {
    return item.pagepermisson && (typeRights ? rights.includes(item.key) : rights.checked.includes(item.key));
  });
  FilterList.forEach(item => {
    // (item.children?.length > 0) 等同于 (item.children && item.children.length)
    // 前面的是es6的链式判断 后面的是 JS的短路运算
    if (item.children?.length > 0) {
      item.children = item.children.filter(child => {
        return child.pagepermisson && (typeRights ? rights.includes(child.key) : rights.checked.includes(child.key));
      });
    }
  });
  console.log('FilterList', FilterList);

  FilterList.forEach(item => {
    if (item.label === '首页') {
      item.icon = <HomeOutlined />;
      item.children = '';
    } else if (item.label === '用户管理') {
      item.icon = <UserOutlined />;
    } else if (item.label === '权限管理') {
      item.icon = <LockOutlined />;
    } else if (item.label === '新闻管理') {
      item.icon = <MessageOutlined />;
    } else if (item.label === '审核管理') {
      item.icon = <ThunderboltOutlined />;
    } else if (item.label === '发布管理') {
      item.icon = <SendOutlined />;
    }
  });

  const navigate = useNavigate();
  const { pathname: selectedKey } = useLocation();
  const openKeys = ['/' + selectedKey.split('/')[1]];
  return (
    <Sider trigger={null} collapsible collapsed={collapsedStore.collapsed}>
      <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
        {/* {
          collapsedStore.collapsed ?
            <div className='global-outlined'>
              <GlobalOutlined spin />
            </div>
            :
            <div className="logo" />
        } */}
        <div className='global-outlined'>
          <span>I</span>
          <span style={{ marginRight: 5 }}>T</span>
          <GlobalOutlined spin />
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          <Menu
            onClick={e => {
              navigate(e.key);
            }}
            theme='dark'
            mode='inline'
            selectedKeys={[selectedKey]}
            defaultOpenKeys={openKeys}
            items={FilterList}
          />
        </div>
      </div>
    </Sider>
  );
}

export default observer(SideMenu);
